<template>
    <div class="circleS">
        <svg viewBox="0 0 1040 1040">
            <!-- <path class="van-circle__layer" d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" style="fill: none; stroke-width: 40px"></path> -->
            <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none;stroke-width: 41px; stroke-dasharray: 2198px, 3140px;" stroke="blue"></path>
        </svg>
        <svg viewBox="0 0 1040 1040">
            <!-- <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none;stroke-width: 41px; stroke-dasharray: 2198px, 3140px;" stroke="blue"></path> -->
            <path d="M 520 20 a 500 500 0 1 1 0 1000 a 500 500 0 1 1 0 -1000" fill="none" stroke="blue" stroke-width="60px" stroke-dasharray="2198px, 110px"></path>
        </svg>
        <svg viewBox="0 0 1060 1060">
            <path class="van-circle__layer" d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" style="fill: none; stroke-width: 81px;" stroke="#E5E5E5"></path>
            <path d="M 530 530 m 0 -500 a 500 500 0 1 1 0 1000 a 500 500 0 1 1 0 -1000" class="van-circle__hover" style="stroke-width: 81px; stroke-dasharray: 2198px, 3140px; fill: none" stroke="#74EEFE" stroke-linecap="round"></path>
        </svg>
    </div>
</template>

<script>
export default {
    name: "circleS"
}
</script>

<style scoped>
.circleS {
    width: 75px;
    height: 75px;
}
</style>